<template>
    <div>
            <h1>LOGIN</h1>
           <!-- <form action="" method="post"> -->
        <!--    添加路由-->
        <input type="hidden" name="methods" value="login">
        <p>
            <a>用户名：</a><input placeholder="请输入账号" type="text"  id="username" v-model="username">
        </p>
         <p>
             <a>密&nbsp;&nbsp;码：</a><input placeholder="请输入密码" type="password"  id="userpwd" v-model="userpwd"><br>
         </p>
<!--          <p>
             <lober>验证码:</lober>
             <input placeholder="请输入验证码" type="text" name="inputCode" id="inputCode">

         </p> -->
<!--         <p>
            <img src="" onclick="" alt="">
            <span>点击图片刷新</span>
        </p> -->

         <p>
             <input id="login-btn" class="button" type="submit" value="登录" @click="submit">
         </p>
    </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
export  default {
  name:'Logins',
  components: {


        },
   data(){
    return{
        info:'',
        username:'',
        userpwd:''
    }
   },
   methods:{
    submit:function () {
        var obj = {
            username:this.username,
            userpwd:this.userpwd
        }
        axios.post("/login",qs.stringify(obj)
            ).then((res)=>{

                if (res.data==this.username) {
                    this.$cookieStore.setCookie('user', res.data, 3600);
                  this.$router.push('/home')
                  this.username  = res.data
                  console.log(this.username)
                }else{
                    alert("用户名或密码密码错误")
                }
            console.log(res)
        })

    }
   }     
}
</script>

<style>
    body{
        background-color: #f1f1f1;
    }
    .wrap{
        width:400px;
        height:500px;
        border-radius: 4px;
        /*水平居中*/
        margin:110px auto;
        background-color: #fff;
        box-shadow: 0 0 8px rgba(0,0,0,.1);
        vertical-align: middle;
    }
    p{
        text-align: center;
    }
    h1{
        width:100%;
        height:100px;

        /*去除默认间距*/
        margin: 0;
        padding: 0;
        /*垂直水平居中*/
        text-align: center;
        line-height: 100px;
        /*border-spacing:表格间距*/
        /*文字间距*/

        letter-spacing:5px;
        /*阴影*/
        text-shadow:5px 3px 5px gray;
        /*下边框*/
        border-bottom: 2px solid black;
        /*设置盒子模型/盒子不会被撑大容器*/
        box-sizing: border-box;

    }
    form{
        width: 100%;
        height: 340px;

        /*超出不显示*/
        overflow: hidden;
        box-sizing: border-box;
        /*设置内间距*/
        padding-top:50px;
        /*相对定位：相对于自身定位*/
        /*如果不加方向，保持不变*/
        position: relative;
    }
    input,button{
        padding: 0px;
        margin: 0px;
        outline: none;
        border: none;
        /*设置圆角*/
        border-radius: 25px;
    }
    input{
        width:250px;
        height:35px;
        border: 1px solid #d3d3d3;
        box-sizing: border-box;
        padding-left: 10px;

    }

    input:focus{
        border: none;
        /*box-shadow:水平 垂直 模糊 扩展 颜色 内外阴影*/
        box-shadow:0 0 10px 1px purple inset ;
    }
    .button{
        width:250px;
        height:45px;
        /*绝对定位：相对于离它最近的祖先级元素中拥有position属性来定位*/
        position: absolute;
        top:260px;
        left:13rem;
        /*修改鼠标为手*/
        cursor: pointer;
        background-color:burlywood;
        color: white;
    }
    button:active{
        background-color: purple;
    }
</style>